<template>
  <div class="layout-container">
    <!-- 侧边栏 -->
    <el-menu
      class="sidebar"
      :collapse="isCollapse"
      :default-active="activeMenu"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      router
    >
      <div class="logo-container">
        <img :src="logoUrl" alt="Logo" class="logo" v-if="!isCollapse" />
        <span class="title" v-if="!isCollapse">懂车之家</span>
      </div>
      
      <el-menu-item index="/">
        <el-icon><ElIconHouse /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
      
      <el-menu-item index="/car-browse">
        <el-icon><ElIconCar /></el-icon>
        <template #title>汽车浏览</template>
      </el-menu-item>
      
      <el-menu-item index="/sales-statistics">
        <el-icon><ElIconDataAnalysis /></el-icon>
        <template #title>销售统计</template>
      </el-menu-item>
      
      <el-menu-item index="/sales-ranking">
        <el-icon><ElIconTrophy /></el-icon>
        <template #title>销售排行</template>
      </el-menu-item>
      
      <el-menu-item index="/car-management">
        <el-icon><ElIconSetting /></el-icon>
        <template #title>汽车管理</template>
      </el-menu-item>
      
      <el-menu-item index="/ai-assistant">
        <el-icon><ElIconChatDotRound /></el-icon>
        <template #title>AI助手</template>
      </el-menu-item>
      
      <!-- 个人中心菜单项移到这里 -->
      <el-menu-item index="/profile" class="profile-menu-item">
        <el-icon><ElIconUser /></el-icon>
        <template #title>个人中心</template>
      </el-menu-item>
    </el-menu>
    
    <!-- 主内容区 -->
    <div class="main-container">
      <!-- 顶部导航栏 -->
      <div class="navbar">
        <div class="left">
          <el-icon class="toggle-sidebar" @click="toggleSidebar">
            <ElIconFold v-if="!isCollapse" />
            <ElIconExpand v-else />
          </el-icon>
          <breadcrumb />
        </div>
        
        <div class="right">
          <el-dropdown trigger="click">
            <div class="avatar-container">
              <el-avatar :size="32" :src="userAvatar">{{ userInitials }}</el-avatar>
              <span class="username">{{ username }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goToProfile">
                  <el-icon><ElIconUser /></el-icon>个人中心
                </el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">
                  <el-icon><ElIconSwitchButton /></el-icon>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      
      <!-- 内容区 -->
      <div class="content-container">
        <router-view />
      </div>
      
      <!-- 底部 - 移除了个人中心按钮 -->
      <div class="footer">
        <div class="copyright">
          © {{ new Date().getFullYear() }} 懂车之家
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import logoUrl from '@/assets/images/logo.png'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../store/user'
import { ElMessageBox } from 'element-plus'
import Breadcrumb from '../components/Breadcrumb.vue'
import {
  House as ElIconHouse,
  Van as ElIconCar,
  DataAnalysis as ElIconDataAnalysis,
  Trophy as ElIconTrophy,
  Setting as ElIconSetting,
  ChatDotRound as ElIconChatDotRound,
  User as ElIconUser,
  Fold as ElIconFold,
  Expand as ElIconExpand,
  SwitchButton as ElIconSwitchButton
} from '@element-plus/icons-vue'

// 状态
const isCollapse = ref(false)
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 计算属性
const activeMenu = computed(() => route.path)
const username = computed(() => userStore.user?.nickname || userStore.user?.username || '用户')
const userAvatar = computed(() => userStore.user?.avatar || '')
const userInitials = computed(() => {
  const name = username.value
  return name ? name.charAt(0).toUpperCase() : 'U'
})

// 方法
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

const goToProfile = () => {
  router.push('/profile')
}

const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logout()
    router.push('/login')
  }).catch(() => {})
}

// 生命周期钩子
// 注意：移除了在Layout中检查登录状态的逻辑，因为路由守卫已经处理了
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  height: 100%;
  min-height: 100vh;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.sidebar:not(.el-menu--collapse) {
  width: 220px;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 3px;
}

.logo-container {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: linear-gradient(135deg, #304156, #2b3649);
  overflow: hidden;
}

.logo {
  width: 36px;
  height: 36px;
  margin-right: 10px;
  transition: all 0.3s;
  object-fit: contain;
}

.title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  background: linear-gradient(to right, #fff, #e6e6e6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s;
}

/* 菜单项样式增强 */
:deep(.el-menu-item) {
  height: 56px;
  line-height: 56px;
  transition: all 0.3s ease !important;
}

:deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

:deep(.el-menu-item.is-active) {
  position: relative;
  overflow: hidden;
}

:deep(.el-menu-item.is-active::before) {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-color);
}

/* 个人中心菜单项样式 */
.profile-menu-item {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.navbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 999;
}

.left, .right {
  display: flex;
  align-items: center;
}

.toggle-sidebar {
  font-size: 22px;
  cursor: pointer;
  margin-right: 20px;
  color: var(--text-regular);
  transition: all 0.3s;
}

.toggle-sidebar:hover {
  color: var(--primary-color);
  transform: scale(1.1);
}

.avatar-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 20px;
  transition: all 0.3s;
}

.avatar-container:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

:deep(.el-avatar) {
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.avatar-container:hover :deep(.el-avatar) {
  transform: scale(1.1);
}

.username {
  margin-left: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.3s;
}

.content-container {
  flex: 1;
  padding: 25px;
  overflow-y: auto;
  background-color: var(--background-color);
  transition: all 0.3s;
}

.content-container::-webkit-scrollbar {
  width: 8px;
}

.content-container::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 4px;
}

.footer {
  height: 50px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border-light);
  transition: all 0.3s;
}

.copyright {
  font-size: 13px;
  color: var(--text-secondary);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .sidebar:not(.el-menu--collapse) {
    width: 64px;
  }
  
  .sidebar {
    position: fixed;
    z-index: 1001;
    height: 100%;
  }
  
  .main-container {
    margin-left: 64px;
  }
  
  .username {
    display: none;
  }
  
  .content-container {
    padding: 15px;
  }
  
  .navbar {
    padding: 0 15px;
  }
}

/* 页面切换动画 */
:deep(.router-view-transition-enter-active),
:deep(.router-view-transition-leave-active) {
  transition: all 0.5s ease;
}

:deep(.router-view-transition-enter-from),
:deep(.router-view-transition-leave-to) {
  opacity: 0;
  transform: translateY(30px);
}
</style>